<template>
  <div class="z-h-100 Chief">
    <el-scrollbar style="height:100%; ">
      <div class="Chief-content-box">
        <div class="Chief-show">
          <Box pWidth="49%">
            <One></One>
          </Box>
          <Box pWidth="49%">
            <Two></Two>
          </Box>
          <Box pWidth="49%" pHeight="19vw">
            <Three></Three>
          </Box>
          <Box pWidth="49%" pHeight="19vw">
            <Four></Four>
          </Box>
          <Box pWidth="49%" pHeight="19vw">
            <Five></Five>
          </Box>
          <Box pWidth="49%" pHeight="19vw">
            <Six></Six>
          </Box>
          <Box pWidth="99%" pHeight="23vw">
            <Seven></Seven>
          </Box>
          <Box pWidth="49%" pHeight="19vw">
            <Eight></Eight>
          </Box>
          <Box pWidth="49%" pHeight="19vw">
            <Nine></Nine>
          </Box>
          <Box pWidth="49%" pHeight="13vw">
            <Ten></Ten>
          </Box>
          <Box pWidth="49%" pHeight="13vw">
            <Eleven></Eleven>
          </Box>
        </div>
        <div class="Chief-management">
          <Box pWidth="99%" pHeight="40vh">
            <Twelve></Twelve>
          </Box>
          <Box pWidth="99%" pHeight="40vh">
            <Thirteen></Thirteen>
          </Box>
          <Box pWidth="99%" pHeight="40vh">
            <Fourteen></Fourteen>
          </Box>
          <Box pWidth="99%" pHeight="40vh">
            <Fifteen></Fifteen>
          </Box>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import Box from "../components/contentBox";
import One from "./components/One";
import Two from "./components/Two";
import Three from "./components/Three";
import Four from "./components/Four";
import Five from "./components/Five";
import Six from "./components/Six";
import Seven from "./components/Seven";
import Eight from "./components/Eight";
import Nine from "./components/Nine";
import Ten from "./components/Ten";
import Eleven from "./components/Eleven";
import Twelve from "./components/Twelve";
import Thirteen from "./components/Thirteen";
import Fourteen from "./components/Fourteen";
import Fifteen from "./components/Fifteen";
export default {
  name: "Chief",

  components: {
    Box, One, Two, Three, Four, Five, Six, Seven, Eight, Nine, Ten, Eleven, Twelve, Thirteen, Fourteen, Fifteen
  }
};
</script>

<style lang='less'>
@showWidth: 80%;
.Chief{
  // background: rgba(#409EFF,.1);
  // .bgColor();
  color: #666;
  .Chief-content-box{
    >div{
      display: inline-flex;
      // padding: 1vw;
      flex-wrap: wrap;
    }
    .Chief-show{
      width: @showWidth;
      max-width: @showWidth;
      padding-right: 0;
    }
    .Chief-management{
      vertical-align: top;
      width: calc(100% - @showWidth);
      max-width: calc(100% - @showWidth);
      padding-left: 0;
      >div{
        margin: 2% 0;
      }
    }
  }

  // 重置Chief下el-tabs样式
  .el-tabs__content{
      height: 94% !important;
      overflow-x: hidden;
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
    }
    .el-tab-pane{
      height: 100% !important;
    }
}

// 子组件填充内容区
.content-h-auto{
  position: absolute;
  top: 50px;
  left: .5vw;
  right: .5vw;
  bottom: .5vw;
  .left-box{
    display: inline-block;
    width: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .right-box{
    left: 50%;
    display: inline-block;
    width: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
  }
}

// 用于设置拖拽组件的背景色
[chief-style-set]{
  background-color: #fff;
}

// 修改tabs组件样式
.customTabs{
  .is-active{
    .bgColor();
    color:#fff !important;
    border: none !important;
  }
  .el-tabs__item{
    .color();
    background-color: #F5F9FC;
    border: none !important;
  }
}
</style>